<template>
  <div class="menu">
    <form action="/">
      <van-search placeholder="输入咖啡饮品" shape="round" @focus="toSearch" />
    </form>
    <div class="itemMenu">
      <van-sidebar v-model="active" class="sidebar" @change="onChange">
        <van-sidebar-item title="推荐" />
        <van-sidebar-item title="拿铁" />
        <van-sidebar-item title="咖啡" />
        <van-sidebar-item title="瑞纳冰" />
      </van-sidebar>
      <div class="content">
        <div v-show="active == i" v-for="(v, k, i) in itemName" :key="i">
          <van-list>
            <ItemList
              v-for="item in v"
              :key="item.pid"
              @intoDetail="intoDetail"
              class="goodsItem"
              :item="item"
            ></ItemList>
          </van-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../assets/less/menu.less";
import ItemList from "../components/ItemList.vue";
export default {
  name: "Menu",
  data() {
    return {
      active: 0,
      itemName: {
        hot: [],
        latte: [],
        coffee: [],
        renaIce: [],
      },
    };
  },
  components: {
    ItemList,
  },
  methods: {
    toSearch() {
      this.$router.push({ name: "Search" });
    },
    intoDetail(pid) {
      return this.$router.push({
        name: "Details",
        params: { pid },
      });
    },
    onChange(index) {
      return (this.active = index);
    },
    getHot() {
      this.$toast.loading({
        message: "加载中",
        forbidClick: true,
        duration: 0,
      });

      this.$axios({
        method: "GET",
        url: "/typeProducts",
        params: {
          appkey: this.appkey,
          key: "isHot",
          value: 1,
        },
      })
        .then((res) => {
          // console.log('res getHot ==> ', res);
          this.$toast.clear();

          if (res.data.code === 500) {
            this.itemName.hot = res.data.result;
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    getLatte() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      this.$axios({
        method: "GET",
        url: "/typeProducts",
        params: {
          appkey: this.appkey,
          key: "type",
          value: "latte",
        },
      })
        .then((res) => {
          // console.log('res getLatte ==> ', res);
          this.$toast.clear();

          if (res.data.code === 500) {
            this.itemName.latte = res.data.result;
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    getRenaIce() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      this.$axios({
        method: "GET",
        url: "/typeProducts",
        params: {
          appkey: this.appkey,
          key: "type",
          value: "rena_ice",
        },
      })
        .then((res) => {
          // console.log('res getRenaIce ==> ', res);
          this.$toast.clear();

          if (res.data.code === 500) {
            this.itemName.renaIce = res.data.result;
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    getCoffee() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      this.$axios({
        method: "GET",
        url: "/typeProducts",
        params: {
          appkey: this.appkey,
          key: "type",
          value: "coffee",
        },
      })
        .then((res) => {
          // console.log('res getCoffee ==> ', res);
          this.$toast.clear();

          if (res.data.code === 500) {
            this.itemName.coffee = res.data.result;
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
  },
  created() {
    this.getLatte();
    this.getCoffee();
    this.getRenaIce();
    this.getHot();
  },
};
</script>

<style lang="less" scoped>
</style>